<template>
  <div>
    <h3>Son组件</h3>
    <p>App str: {{str}}</p>
    <p>App username123: {{username123}}</p>
    <p>App age: {{age}}</p>
    <!-- <button @click="getProps">getProps</button>
    <button @click="directChange">直接修改父组件的username123</button> -->
  </div>
</template>

<script>
export default {
    name:'Son',
    // 方式一：数组的写法 [推荐]
    // props:['str', 'username123', 'car','hitSon','changeUsername'], 
    // 方式二：对象的写法 可以先定类型
    // props:{
    //     str:String,
    //     age:Number,
    //     username123:String
    // },
    // 方式三: 对象写法：可以先定类型、默认值、是否必填
    props:{
        str:{
            type:String,
            default:'我是str默认值',
            required:true
        },
        age:{
            type:Number,
            default:100
        },
        username123:{
            type:String,
            required:true
        }
    },
    data(){
        return {
           
        }
    },
    methods:{
        getProps(){
            
        }
    }
}
</script>

<style>

</style>